{extend name="public/base"/}
{block name="style"}
<script type="text/javascript">

    $(document).ready(function () {


        $('.moreIco').click(function () {

            if($(this).hasClass('closeIco')){

                $('#header').removeClass('app_headerFixed2');
                $(this).removeClass('closeIco');
                $('.app_header_second').hide();
                $('.app_meskSection').hide();

            }else{

                $('#header').addClass('app_headerFixed2');
                $(this).addClass('closeIco');
                $('.app_header_second').show();
                $('.app_meskSection').show();
            }



        })

        $('body').on('click','.app_meskSection',function () {
            $('.app_header_second').hide();
            $('.app_meskSection').hide();
            $('#header').removeClass('app_headerFixed2');
            $('.moreIco').removeClass('closeIco');
        })
    })

</script>
{/block}
{block name="body"}
	<div class="app_goBackToTop"></div>
	<div class="app_meskSection"></div>


	<div  class="container">

    <div class="app_header_section2  app_scrollerHeader" id="header">
        <div class="app_header_detail2">
            <div class="app_header_back"></div>
            <div class="app_header_h1">

                <div class="app_header_section_nav"  style="padding-left: 28%;">
                    <ul class='app_marginLeft app_styleUl2' >
                        <li {eq name="channel" value="1"}class="active" {/eq}>
                            <a href="/fullflag/channel/1/type/1/">男频</a>
                        </li>
						<li  {eq name="channel" value="2"}class="active" {/eq}>
                            <a href="/fullflag/channel/2/type/1/">女频</a>
                        </li>
					</ul>
                </div>
                
                <a href="/personal/bookcase"> <i class="shujiaIco"></i></a>
                <i class="moreIco"></i>
            </div>
        </div>
		{include file="public/dropnav" /}
	</div>


    <div class="app_header_section">
        <div class="app_header_section_bottom2">
            <ul>
                <li {eq name="type" value="1"}class="active" {/eq}>
                <a href="/fullflag/channel/{$channel}/type/1/">推荐</a>
                </li>
                <li  {eq name="type" value="2"}class="active" {/eq}>
                <a href="/fullflag/channel/{$channel}/type/2/">人气</a>
                </li>
                <li {eq name="type" value="3"}class="active" {/eq}>
                <a href="/fullflag/channel/{$channel}/type/3/">最新</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="app_body">

        <div class="app_listBlock app_deleteMargin">
            <div class="app_listBlock_con">
                <ul id="books">
                
				</ul>
            </div>

            <div class="app_reload" id="loading" style="display: none">
                <span class="loader-section">
                    <div class="loader-sectionContainer">
                        <div class="sk-fading-circle">
                            <div class="sk-circle1 sk-circle"></div>
                            <div class="sk-circle2 sk-circle"></div>
                            <div class="sk-circle3 sk-circle"></div>
                            <div class="sk-circle4 sk-circle"></div>
                            <div class="sk-circle5 sk-circle"></div>
                            <div class="sk-circle6 sk-circle"></div>
                            <div class="sk-circle7 sk-circle"></div>
                            <div class="sk-circle8 sk-circle"></div>
                            <div class="sk-circle9 sk-circle"></div>
                            <div class="sk-circle10 sk-circle"></div>
                            <div class="sk-circle11 sk-circle"></div>
                            <div class="sk-circle12 sk-circle"></div>
                        </div>
                    </div>
                    <div class="loader-sectionTips">正在加载更多</div>
                </span>
            </div>

            <div class="app_noData" style="display: none"><span class="noData">没有更多内容了</span></div>

        </div>
        {block name="include"}{include file="public:footer" /}{/block}
    </div>
</div>


{/block}
{block name="script"}
<script type="text/javascript">
var sBookstop=true,sBookstopTime=null;
var channel = {$channel};
var type = {$type};
var start=0, 
limit=10,
sBookstop=true, 
sBookstopTime=null, 
pagesize=10;

$(function(){
	loadingList();
	
	$(window).scroll(function(){
		var nWinH =  document.documentElement.clientHeight;
		var nScrollTop = (document.body.scrollTop || document.documentElement.scrollTop) + nWinH;
		var nBodyScrollH = document.body.scrollHeight;
		if(sBookstop && nBodyScrollH - nScrollTop < 240){
			bookstoptime();
			$('#loading').show();
			$('.app_noData').hide();
			loadingList();
		}
	});
});

function loadingList(){
	$.ajax({
		type: 'get',
		url: '/api/top/fullflag/',
		timeout: 10000,
		cache: false,
		dataType: 'json',
		data: {
			'start': start,
        	'limit': limit,
			'type': type,
        	'channel':channel,
		},
		success: function (data) {
			clearTimeout(sBookstopTime);
			if (typeof data == 'string') {
				data = JSON.parse(data);
			}
			if(data.code==0){
				sBookstop = false;
			    $('#loading').hide();
				$('.app_noData').show();
				return false;
			}
			var books = data.data;
			var sLi = '';
			
					
			var html = "";
			for (var i=0; i < books.length; i++) {
				html += '<li>';
				html += '<a href="/book/info/id/'+books[i].id+'.html">';
				html += '<div class="leftImage"><img src="'+books[i].cover+'" onerror="javascript:this.src=\'/public/novel/images/default.jpg\';"/></div>';
				html += '<div class="rightBlock">';
				html += '<span class="rightBlock_title">'+books[i].title+'</span>';
				html += '<span class="rightBlock_con">';
				html += '<span class="con">'+books[i].intro+'</span>';
				html += '</span>';
				html += '<span class="rightBlock_label">';
				html += '<span class="keyWord_l">';
				html += '<i class="k1">'+books[i].fullflag+'</i>'
				html += '</span>';
				html += '<span class="keyWord_r">';
				html += '<i class="k1">'+books[i].size+'万字</i>';
				html += '<i class="k2">'+books[i].category+'</i>';
				html += '</span>';
				html += '</span>';
				html += '</div>';
				html += '</a>';
				html += '</li>';
			}
			$('#books').append(html);
			start+=pagesize;
			if(data.length < pagesize){
				$('.app_reload').hide();
				$('.app_noData').show();
				sBookstop = false;
			}else{
				$('.app_reload').show();
				$('.app_noData').hide();
				sBookstop = true;
			}			
			$('img').picLazyLoad({
				effect : "fadeIn"
			});

		},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
			$('.app_reload').hide();
			$('.app_noData').show();
			sBookstop = false;
		}
	});
}



//防止重复请求数据
function bookstoptime() {
	clearTimeout(sBookstopTime);
	sBookstop = false;
	sBookstopTime = setTimeout(function () {
		sBookstop = true;
	}, 10000);
}

</script>
{/block}


